import React, { Component } from "react";
import axios from "../../utils/axios";
// 引入全部频道标签栏
import LabelBar from "./LabelBar";

import { connect } from "react-redux";
import "./Home1.scss";
import { List, AutoSizer } from "react-virtualized";

class Home1 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ListArray: [],
    };
    this.MainList=React.createRef();
  }
  componentWillReceiveProps(nextProps) {
    // window.location.reload()
    // console.log(nextProps);
   axios
      .get(
        "item/list.json?__timestamp=1598345634394&categoryId=" + nextProps.id
      )
      .then((res) => {
        console.log(res);
        this.setState({
          ListArray: Array.from(res.data.data.categoryItemList),
        },function(){
          console.log(this.state.ListArray);
        });
        
      })
      .catch((err) => {
        console.log(err);
      });
    
  }

  rowRenderer = ({ key, index, style }) => {

    // let arr = this.state.ListArray.slice(0,index)
    console.log(this.state.ListArray);
    // if(this.state.ListArray.length==0){
    //   this.props.history.push('/') ;
    //   return;
    // }
    // let v=this.state.ListArray;
    // let i = 0;
    return (
        <div key={key} style={style}>
           {this.state.ListArray.map((v, i) => (
          <div key={i} className="allList">
            <h2>{v.category.name}</h2>
            <h3>{v.category.frontName}</h3>
            {v.itemList.map((value, index) => (
              <section key={index}>
                <img src={value.listPicUrl} alt={value.displaySkuId}></img>
                <p>{value.name}</p>
                <span>￥{value.retailPrice}</span>
              </section>
            ))}
            <i></i>
          </div>
          ))}
        </div>
    );
}
  render() {
    return (
      <div>
        {/* 标签栏开始 */}
        <LabelBar></LabelBar>
        {/* 标签栏结束 */}

        

        <div className="list_content">
          <AutoSizer>
            {({ height, width }) => (
              <List
                ref={this.MainList} //非受控表单
                height={529}
                rowCount={1}
                rowHeight={3000}
                rowRenderer={this.rowRenderer}
               
                width={375}
              />
            )}
          </AutoSizer>
        </div>
      </div>
    );
  }
}
const mapStateToProps = (state) => {
  return {
    id: state.getIn(["home", "id"]),
  };
};

const MapDispatchToProps = (dispatch) => {
  return {};
};

export default connect(mapStateToProps, MapDispatchToProps)(Home1);
